<template>
  <div class="login-frame">
    <h1 class="title">后台管理系统</h1>
    <el-tabs type="border-card" class="demo-tabs" stretch v-model="activeName">
      <el-tab-pane name="first">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><Avatar /></el-icon>
            <span> 账号登录</span>
          </span>
        </template>
        <loginAvatarVue ref="avatarRef"></loginAvatarVue>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><Iphone /></el-icon>
            <span> 手机登录</span>
          </span>
        </template>
        <loginIphoneVue></loginIphoneVue>
      </el-tab-pane>
    </el-tabs>

    <div class="rember-avatar">
      <el-checkbox
        v-model="isKeepPassword"
        label="记住密码"
        @change="checkChange"
      />
      <el-link type="primary" @click="forgetPassword">忘记密码</el-link>
    </div>
    <div class="btn">
      <el-button class="login-btn" type="primary" @click="signInNow"
        >立即登录</el-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Avatar, Iphone } from '@element-plus/icons-vue'
import loginAvatarVue from './login-avatar.vue'
import loginIphoneVue from './login-iphone.vue'
import { getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import LocalCache from '@/utils/cache'

export default defineComponent({
  components: {
    Avatar,
    Iphone,
    loginAvatarVue,
    loginIphoneVue
  },
  setup() {
    const activeName = ref('first')
    const isKeepPassword = ref(LocalCache.getCache('isKeepPassword') ?? false)
    const avatarRef = ref<InstanceType<typeof loginAvatarVue>>()
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const { appContext } = getCurrentInstance()!
    //立即登录
    const signInNow = () => {
      // eslint-disable-next-line no-constant-condition
      activeName.value == 'first'
        ? avatarRef.value?.loginAction(isKeepPassword.value)
        : ElMessage({ message: '暂未开发' }, appContext)
    }
    //缓存是否记住密码
    const checkChange = () => {
      isKeepPassword.value
        ? LocalCache.setCache('isKeepPassword', isKeepPassword.value)
        : LocalCache.deleteCache('isKeepPassword')
    }
    //忘记密码
    const forgetPassword = () => {
      avatarRef.value?.forgetPa()
      LocalCache.deleteCache('password')
    }
    return {
      isKeepPassword,
      activeName,
      signInNow,
      avatarRef,
      checkChange,
      forgetPassword
    }
  }
})
</script>

<style scoped lang="less">
.login-frame {
  width: 450px;
  margin-bottom: 300px;
  .title {
    text-align: center;
  }
  .demo-tabs {
    opacity: 0.8;
  }

  .rember-avatar {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .btn {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    .login-btn {
      width: 80%;
    }
  }
}
</style>
